<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :isShowTransparentTitle="false"   navbarType='5'>
            <view class="ml10" slot="left">
                我的
            </view>
        </wlk-navbar>
        <view class="user-content relative">
            <view class="user-card relative">
                <view class="user-info wlkflex" @click="loginPopupShow">
                    <view class="avatar-box wlkflex">
                        <u-avatar :src="userInfo.avatar" size="62"></u-avatar>
                    </view>
                    <view class="user-nickname ml20">{{userInfo.nickname||'去登录'}}</view>
                </view>
            </view>
            <view class="nav">
              <view class="wlkflex justify-between btn-card" >
                <view class="btn-left relative br08 overHidden shadow bgw" @click="$Router.push('/pages/wallet/index')">
                  <image class="wd100 block bg-image" :src="images.wallet" mode="widthFix"></image>
                  <view class="btn-text">
                    <view class="name bold">余额</view>
                    <view class="desc wlkflex mt10 align-center">
                      <view class="mr05">{{userInfo.money||'0.00'}}元</view>
                      <view>
                        <uni-icons type="right" size="14" color="#999"></uni-icons>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="btn-right">
                  <view class="right-item relative br08 overHidden shadow bgw" @click="toOrder('all','0')">
                    <image class=" block bg-ticket-image" :src="images.line" mode="widthFix"></image>
                    <view class="btn-ticket-text bold">线路订单</view>
                  </view>
                  <view class="right-item relative br08 overHidden shadow bgw mt30" @click="toOrder('all','2')">
                    <image class="block bg-line-image" :src="images.ticket" mode="widthFix"></image>
                    <view class="btn-line-text bold">门票订单</view>
                  </view>
                </view>

              </view>
                <view class="order-card wlkflex justify-between br08 shadow mt30">
                    <view class="grid" @click="toOrder('0')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/payment.png" width="25" height="25"></u--image>

                        </view>
                        <view class="mt20 center">待付款</view>
                    </view>
                    <view class="grid" @click="toOrder('1')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/consumption.png" width="25" height="25"></u--image>

                        </view>
                        <view class="mt20 center">已支付</view>
                    </view>
                    <view class="grid relative" @click="toOrder('3')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/refund.png" width="25" height="25"></u--image>

                        </view>
                        <view class="mt20 center">已完成</view>
                    </view>
                    <view class="grid over relative" @click="toOrder('refund')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/evaluate.png" width="25" height="25"></u--image>
                        </view>
                        <view class="mt20 center">退款</view>
                        <view class="triangle triangle_border"></view>
                        <view class="triangle triangle_bg" ></view>
                    </view>
                    <view class="order-all grid" @click="toOrder('all')">
                        <view class="wlkflex justify-center ">
                            <uni-icons type="bars" size="30" :color="themeColor"></uni-icons>
                        </view>
                        <view class="mt10 center">全部订单</view>
                    </view>
                </view>

<!--                <view class="tools-card br08 shadow">
                    <u-cell-group :border="false">
                        <u-cell :border="false" isLink @click="$Router.push('/pages/wallet/index')">
                            <uni-icons slot="icon" type="wallet" size="25"></uni-icons>
                            <text class="title" slot="title">我的钱包</text>
                        </u-cell>
                        <u-cell :border="false" isLink @click="$Router.push('/pages/line/like')">
                            <uni-icons slot="icon" type="star" size="25"></uni-icons>
                            <text class="title" slot="title">收藏线路</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="点赞游记" @click="$Router.push('/pages/note/like')">
                            <uni-icons slot="icon" type="heart" size="25"></uni-icons>
                            <text class="title" slot="title">点赞游记</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="出行人管理" @click="$Router.push('/pages/passenger/list')">
                            <uni-icons slot="icon" type="staff" size="25"></uni-icons>
                            <text class="title" slot="title">出行人管理</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="个人信息" @click="$Router.push('/pages/user/info')">
                            <uni-icons slot="icon" type="vip" size="25"></uni-icons>
                            <text class="title" slot="title">个人信息</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="分销中心" @click="$Router.push('/pages/plugins/commission/index')">
                          <uni-icons slot="icon" type="medal" size="25"></uni-icons>
                          <text class="title" slot="title">分销中心</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="系统设置" @click="$Router.push('/pages/user/set')">
                            <uni-icons slot="icon" type="gear" size="25"></uni-icons>
                            <text class="title" slot="title">系统设置</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="退出登入" @click="outModel = true">
                            <uni-icons slot="icon" type="undo" size="25"></uni-icons>
                            <text class="title" slot="title">退出登入</text>
                        </u-cell>
                    </u-cell-group>
                </view>-->
              <view class="tools-card br08 shadow mt30">

                <u-grid
                    :border="false"
                >
                  <u-grid-item
                      v-for="(item,index) in gridList"
                      :key="index"
                      @click="$Router.push(item.path)"
                  >
                    <uni-icons :type="item.name" size="29"></uni-icons>
                    <view class="grid-text mb30 mt10">{{item.title}}</view>
                  </u-grid-item>
                </u-grid>
              </view>
              <u-button :customStyle="{
                fontWeight: 'bold',
			          width:'92%',
			          marginTop: '40rpx',
                }" shape="circle"  :color="themeColor" size="large" @click="outModel=true" text="退出登录"></u-button>

            </view>

          <view class="merch wlkflex" v-if="userInfo.isWorker" :style="{background:linearColor}" @click="$Router.push('/pages/merch/index')">
              <i class="gg-arrows-exchange icon"></i>
              <view class="ml05">核销端</view>
            </view>
        </view>

        <u-modal

                :show="outModel"
                :showCancelButton="true"
                @cancel ='outModel =false'
                @close ='outModel =false'
                :closeOnClickOverlay="true"
                @confirm="logoutFun"
                :confirmColor="themeColor"
                content="确定退出登录？"
        ></u-modal>
      <view class="bg-radio" :style="{backgroundColor:themeColor}"></view>
        <wlk-tabbar></wlk-tabbar>
    </view>


</template>
<script>
    var _self;
    import {rgbaToRgb} from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin','images'])

        },
        data() {
            return {
                outModel:false,
                style:{marginTop:''},
                linearColor:'',
              gridList: [
                {
                  name: 'star',
                  title: '收藏线路',
                  path:'/pages/line/like'
                },
                {
                  name: 'heart',
                  title: '收藏景点',
                  path:'/pages/ticket/like'
                },
                  {
                    name: 'hand-up',
                    title: '点赞游记',
                    path:'/pages/note/like'
                  },
                  {
                    name:'staff',
                    title: '旅客信息',
                    path:'/pages/passenger/list'
                  },
                  {
                    name: 'vip',
                    title: '个人信息',
                    path:'/pages/user/info'
                  },
                  {
                    name:'medal',
                    title: '分销中心',
                    path:'/pages/plugins/commission/index'
                  },
                  {
                    name: 'gear',
                    title: '系统设置',
                    path:'/pages/user/set'
                  },
              ]
            };
        },
        onLoad() {
            uni.hideTabBar();
            _self = this;
        },
        onShow() {
          this.linearColor = 'linear-gradient(to left ,'+this.themeColor+' ,'+ uni.$u.colorToRgba(rgbaToRgb(this.themeColor), 0.75)+')';
          this.isLogin?this.getUserInfo():'';
          this.$store.commit('setOrderStatus','');
          this.$store.commit('setOrderType','0');
        },
      watch:{
        themeColor(val) {
          this.linearColor = 'linear-gradient(to left ,'+val+' ,'+ uni.$u.colorToRgba(rgbaToRgb(val), 0.75)+')';
        },
      },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        // 下拉刷新
        onPullDownRefresh() {
            this.isLogin?this.getUserInfo():'';
        },
        created() {
            this.style.marginTop = uni.$u.addUnit(uni.getSystemInfoSync().statusBarHeight + 44, 'px');
        },
        methods: {
            ...mapActions(['getUserInfo','logout']),
            ...mapMutations(['setLoginPopupShow']),
            toOrder(st,type='0'){
                this.$store.commit('setOrderStatus',st);
                this.$store.commit('setOrderType',type);
                this.$Router.pushTab('/pages/index/order')
            },
            loginPopupShow(){
                if(!this.isLogin){
                    this.setLoginPopupShow(true)
                }

            },
            logoutFun() {
                this.outModel =false;
                this.logout();
            },

        }
    }
</script>
<style lang="scss">
   page{
       /*background-color: #FFFFFF!important;*/
       .user-card{
           /* #ifdef H5 */
           padding: 150rpx 30rpx 200rpx 30rpx;
           /* #endif */
           /* #ifdef MP-WEIXIN */
           padding: 200rpx 30rpx 220rpx 30rpx;
           /* #endif */
           //background-image: repeating-linear-gradient(328deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(238deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(238deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),repeating-linear-gradient(328deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),linear-gradient(328deg, rgb(255,255,255),rgb(255,255,255));
           background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));

           font-size: 38rpx;
           font-weight: bold;
           border-radius: 0 0 30% 30%;
           .user-nickname{
               color: $uni-text-color;
           }
       }
       .nav{
           position: absolute;
           /* #ifdef H5 */
           top: 350rpx;
           /* #endif */
           /* #ifdef MP-WEIXIN */
           top: 380rpx;
           /* #endif */
           width: 92%;
           left: 4%;
           padding-bottom: 120rpx;
            z-index: 10;
           .order-card{
               background-color: #FFFFFF;
               font-size:$font-base;
               padding: 20rpx 0;
               .grid{
                   padding: 20rpx 0;
                   width: 20%;
               }
               .over{
                   .triangle {
                       position: absolute;
                       top: 60rpx;
                       z-index: 998;
                       overflow: hidden;
                       width: 0;
                       height: 0;
                       border-width: 5px;
                       border-style: dashed  solid  dashed  dashed;

                   }
                   .triangle_bg {
                       right: -19rpx;
                       z-index: 999;
                       border-color: transparent transparent  transparent #f3f3f3;

                   }
                   .triangle_border {
                       right: -20rpx;
                       border-color:transparent transparent  transparent #f3f3f3;
                   }
               }
               .order-all{
                   box-shadow: -5px 0 4px -2px rgba(0, 0, 0, 0.05);
               }
           }
         .btn-card{
           margin: 0 auto;
           .btn-left{
             border-radius: 10px;
             width: 48%;
             height: 330rpx;
             .bg-image{
               position: absolute;
               right: -130rpx;
               top:-25rpx;
             }
             .btn-text{
               position: absolute;
               left: 22rpx;
               top: 120rpx;
               .name{
                 letter-spacing: 2px;
                 font-size: $font-lg;
                 color: $uni-text-color;
               }
               .desc{
                 font-size: $font-base;
                 color: $uni-text-color-grey;
               }

             }
           }
           .btn-right{
             width: 48%;
             .right-item{
               font-size: $font-lg;
               color: $uni-text-color;
               height: 150rpx;
               .bg-ticket-image{
                 position: absolute;
                 right: 10rpx;
                 width: 49%;
                 top: 10rpx;
               }
               .btn-ticket-text{
                 position: absolute;
                 left: 22rpx;
                 top:50rpx
               }
               .bg-line-image{
                 position: absolute;
                 top: 12rpx;
                 left: 0rpx;
                 width: 45%;
               }
               .btn-line-text{
                 position: absolute;
                 right: 22rpx;
                 top:50rpx
               }
             }
           }
         }
         .head-title{
           font-size: $font-lg;
           font-weight: bold;
           margin: 0 0 50rpx 30rpx;
         }
           .tools-card{
               background-color: #FFFFFF;
               font-size:$font-base;
               padding-top: 30rpx;
               .u-cell{
                   padding:10rpx 0;
               }
               .title{
                   font-size:$font-base;
                   margin-left: 10rpx;
               }
           }
       }
      .merch{
        position: absolute;
        /* #ifdef H5 */
        top: 190rpx;
        /* #endif */
        /* #ifdef MP-WEIXIN */
        top: 230rpx;
        /* #endif */

        right:0;
        z-index:10;
        padding:8rpx 20rpx 8rpx 20rpx;
        border-radius: 30rpx 0 0 30rpx;
        color: #FFFFFF;
        font-size:$font-base;
        .icon{
          transform: scale(.8);
        }
      }
     .bg-radio{
       width: 500rpx;
       height: 500rpx;
       border-radius: 50%;
       position: fixed; // 修改为 fixed 定位
       z-index:1; // 设置较低的 z-index 值
       top: -220rpx;
       right: -220rpx;
       filter: blur(150px);
     }

   }
</style>
